
* {
    margin: 0;
    padding: 0;
}

.top {
    display: flex;
    /*width: 3rem;*/
    width: 80%;
    height: 4rem;
    border: 0.1rem solid black;
    margin: 2rem auto;
    /*从左到右*/
    flex-direction: row;
    /*从右到左*/
    /*flex-direction: row-reverse;*/
    /*从上向下*/
    /*flex-direction: column;*/
    /*从下向上*/
    /*flex-direction: column-reverse;*/
    line-height: 4rem;
    /*从左到右不换行*/
    /*flex-wrap:nowrap;*/
    /*从左到右向下换行*/
    flex-wrap: wrap;
    /*从左到右向上换行*/
    /*flex-wrap: wrap-reverse;*/
    /*左对齐*/
    /*justify-content: flex-start;*/
    /*右对齐*/
    /*justify-content: flex-end;*/
    /*居中对齐*/
    /*justify-content: center;*/
    /*两端对齐*/
    /*justify-content: space-between;*/
    /*每个项目间隔形容*/
    justify-content: space-around;
    /*交叉轴的左上角对齐*/
    /*align-items: flex-start;*/
    /*交叉轴的右下角对齐*/
    /*align-items: flex-end;*/
    /*交叉轴居中对齐*/
    align-items: center;
    /*第一行文字对齐*/
    /*align-items: baseline;*/
    /*填满容器*/
    /*align-items: stretch;*/
}

.one, .two, .three, .four {
    display: flex;
    width: 5rem;
}

.one {
    height: 3rem;
    line-height: 3rem;
    background-color: pink;
    text-align: right;
    /*默认值为0，越小越靠前*/
    order: -1;
}

.two {
    /*和其他项目有不同的对齐方式*/
    align-self:stretch;
}

.three {

}

.four {

}



